<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-10 14:31:17
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-14 14:01:04
 * @FilePath: /huizhou-official-website/src/components/header.vue
-->
<template>
  <div class="header_box"
    :class="bgWhite">
    <div class="header">
      <div class="logo">
        <span
          @click="routerPage(0)">
          <img
            src="../assets/imgaes/logo1.png"
            class="logo_img">
        </span>
      </div>
      <div class="nav_box">
        <ul class="web_menu">
          <li
            class="web_menu_item"
            :class="{'nav_active':isActive== index}"
            v-for="(item,index) in menuList"
            :key="index">
            <div
              v-if="item.children.length == 0"
              @click="routerPage(index,item)">
              {{item.name}}
            </div>
            <div v-else
              class="second_menu_box"
              :class="{'open_nav':open_nav == index}"
              @mouseleave="mouseleave(index)"
              @mouseover="mouseover(index)">
              {{item.name}}
              <i class="el-icon-arrow-down"
                style="font-size:12px"></i>
              <ul
                class="second_menu">
                <li
                  class="second_li"
                  @click="gotoPage(index,j)"
                  v-for="(k,j) in item.children"
                  :key='j'>
                  <span>{{k.name}}</span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="mobile_icon">
        <i class="el-icon-s-fold"
          v-if="!openMobile"
          @click="open"></i>
        <i class="el-icon-close"
          v-else
          @click="close"></i>
        <div
          class="mobile_menu"
          :class="openMobile">
          <div
            class="menu_item"
            v-for="(item,index) in menuList"
            :key="index">
            <div
              @click="routerPage(index,item)"
              v-if="item.children.length == 0"
              class="menu_title">
              {{item.name}}
            </div>
            <template v-else>
              <div
                @click="openNaves(index)"
                class="menu_title">
                {{item.name}}
                <i
                  class="down el-icon-caret-bottom"></i>
              </div>
              <div
                class="menu_second"
                :class="{'open_navs':open_navs == index}">
                <div
                  class="menu_second_item"
                  @click="gotoPage(index,j)"
                  v-for="(k,j) in item.children"
                  :key="j">
                  {{k.name}}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      isActive: 0,
      open_nav: 0,
      open_navs: 0,
      bgWhite: '',
      openMobile: '',
      scrollTop: 0,
      menuList: [],
      openNav: []
    }
  },
  watch: {
    $route: {
      handler: function (val) {
        if (val.meta.title == '惠州市城市建设投资集团有限公司-首页') {
          this.bgWhite = ''
          this.$store.commit('setOpenNav', [0, 0])
        } else if (val.meta.title.substring(0, 4) == '关于我们') {
          this.bgWhite = 'bg-white'
          this.isActive = 1
        } else if (val.meta.title.substring(0, 4) == '业务领域') {
          this.bgWhite = 'bg-white'
          this.isActive = 2
        } else if (val.meta.title.substring(0, 4) == '技术实力') {
          this.bgWhite = 'bg-white'
          this.isActive = 3
        } else if (val.meta.title.substring(0, 4) == '项目案例') {
          this.bgWhite = 'bg-white'
          this.isActive = 4
        } else if (val.meta.title.substring(0, 4) == '企业文化') {
          this.bgWhite = 'bg-white'
          this.isActive = 5
        } else if (val.meta.title.substring(0, 4) == '新闻资讯') {
          this.bgWhite = 'bg-white'
          this.isActive = 6
        } else if (val.meta.title.substring(0, 4) == '人才招聘') {
          this.bgWhite = 'bg-white'
          this.isActive = 7
        } else if (val.meta.title.substring(0, 4) == '联系我们') {
          this.bgWhite = 'bg-white'
          this.isActive = 8
        }
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.getHtmlBodyHeight)
    this.getMent()
    this.openNav = this.$store.state.openNav
    if (!this.openNav || this.openNav[0] == 0 || this.openNav.length == 0) {
      this.bgWhite = ''
    } else {
      this.isActive = this.openNav[0]
      this.bgWhite = 'bg-white'
    }
  },
  methods: {
    routerPage(index) {
      this.openMobile = ''
      this.$store.commit('setOpenNav', [index, 0])
      this.isActive = index
      if (index == 8) {
        this.bgWhite = 'bg-white'
        this.$router.push('/contact_us')
      } else if (index == 0) {
        this.$router.push('/')
      }
      this.goTop()
    },
    gotoPage(index, j) {
      this.openMobile = ''
      this.open_navs = 0
      this.$store.commit('setOpenNav', [index, j])
      this.isActive = index
      if (index == 1) {
        if (j == 0) this.$router.push('/company_profile')
        else if (j == 1) this.$router.push('/development_history')
        else if (j == 2) this.$router.push('/management_team')
        else if (j == 3) this.$router.push('/leadership_care')
      } else if (index == 2) {
        if (j == 0) this.$router.push('/highway_project')
        else if (j == 1) this.$router.push('/government_project')
        else if (j == 2) this.$router.push('/bridge_project')
        else if (j == 3) this.$router.push('/tunnel_project')
        else if (j == 4) this.$router.push('/intellectualization')
      } else if (index == 3) {
        if (j == 0) this.$router.push('/professional_qualification')
        else if (j == 1) this.$router.push('/certificate_of_honor')
        else if (j == 2) this.$router.push('/technological_innovation')
      } else if (index == 4) {
        if (j == 0) this.$router.push('/project_way_index')
        else if (j == 1) this.$router.push('/project_government')
        else if (j == 2) this.$router.push('/investment_business')
        else if (j == 3) this.$router.push('/engineering_inspection')
      } else if (index == 5) {
        if (j == 0) this.$router.push('/cultural_concept')
        else if (j == 1) this.$router.push('/safe_production')
        else if (j == 2) this.$router.push('/craftsman_spirit')
      } else if (index == 6) {
        if (j == 0) this.$router.push('/industry_news')
        else if (j == 1) this.$router.push('/company_news')
        else if (j == 2) this.$router.push('/party_building')
        else if (j == 3) this.$router.push('/video_news')
        else if (j == 4) this.$router.push('/shape')
      } else if (index == 7) {
        if (j == 0) this.$router.push('/job_recruitment')
        else if (j == 1) this.$router.push('/people_develoment')
        else if (j == 2) this.$router.push('/team_building')
      }
      this.goTop()
    },
    getMent() {
      axios.post('/home/project', {}).then(res => {
        this.menuList = res.data.data.projectList
        this.menuList.map((item, index) => {
          if (index === 6) {
            const obj = {
              createTime: '2020-09-24 10:48:13',
              id: '6708373832316489729',
              isEnable: 0,
              name: '闽交品牌',
              parentId: '6708371846066081792',
              register: '二级',
              remark: '闽交品牌',
              sort: 4
            }
            const obj1 = {
              createTime: '2020-09-24 10:48:13',
              id: '6708373832316489730',
              isEnable: 0,
              name: '媒体聚焦',
              parentId: '6708371846066081792',
              register: '二级',
              remark: '媒体聚焦',
              sort: 4
            }
            item.children.push(obj, obj1)
          }
        })

        this.$store.commit('setNavList', this.menuList)
      })
    },
    mouseover(e) {
      this.open_nav = e
    },
    mouseleave() {
      this.open_nav = 0
    },
    openNaves(index) {
      this.open_navs = index
    },
    open() {
      this.openMobile = 'open_mobile'
    },
    close() {
      this.openMobile = ''
    },
    getHtmlBodyHeight() {
      //获取滚动时的高度
      const openNav = this.$store.state.openNav
      if (openNav[0] == 0) {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (this.scrollTop > 120) {
          this.bgWhite = 'bg-white'
        } else {
          this.bgWhite = ''
        }
      } else {
        this.bgWhite = 'bg-white'
      }
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style>
.second_menu {
  height: 0 !important;
  overflow: hidden;
  opacity: 1 !important;
}
</style>